<template>
  <div id="main">
    <div class="rootBox">
        <div class="part" id="tb1">
            <div class="canvasBox" id="clTB1"></div>
        </div>
        <div class="part" id="tb2">
            <div class="canvasBox" id="clTB2"></div>
        </div>
    </div>
    <div class="rootBox">
        <div class="part" id="tb3">
            <div class="canvasBox" id="clTB3"></div>
        </div>
        <div class="part" id="tb4">
          <div class="canvasBox" id="clTB4"></div>
        </div>
    </div>
  </div>

</template>
<script type="text/javascript">

  function load(){
    let bWidth = document.getElementById('tb1').offsetWidth;
    let bHeight = document.getElementById('tb1').offsetHeight;

    let canvasBox = document.getElementsByClassName('canvasBox');
    for (let i = 0; i < canvasBox.length; i++) {
      canvasBox[i].style.width = bWidth + 'px';
      canvasBox[i].style.height = bHeight + 'px';
    }


    let partArr = document.getElementsByClassName('part');

    for (let i = 0; i < partArr.length; i++) {
      partArr[i].style.width = bWidth + 'px';
    }

    console.log('part的大小-->width:' + bWidth + ',height:' + bHeight);


    let tb1 = echarts.init(document.getElementById('clTB1'));
    let tb2 = echarts.init(document.getElementById('clTB2'));
    let tb3 = echarts.init(document.getElementById('clTB3'));
    let tb4 = echarts.init(document.getElementById('clTB4'));

    let option1 = {
      title: {
        x: 'center',
        text: '提车推移图',
        textStyle: {
          color: '#fff',
          fontSize: '30'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
            fontSize: '30'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      color: ['#5086d6', '#f67c2b', '#a5a5a5'],
      legend: {
        bottom: 10,
        left: 'center',
        data: ['下单', '提车', '未提', '提车及时率'],
        textStyle: {
          color: '#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['11-1', '11-2', '11-3', '11-4', '11-5'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量',
          min: 0,
          max: 900,
          interval: 150,
          axisLabel: {
            formatter: '{value} 台',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#464646'
            }
          }
        },
        {
          type: 'value',
          name: '比率',
          min: 0,
          max: 120,
          interval: 20,
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#464646'
            }
          }
        }
      ],
      series: [
        {
          name: '下单',
          type: 'bar',
          data: [500, 550, 400, 700, 600],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '提车',
          type: 'bar',
          data: [400, 650, 400, 500, 600],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '未提',
          type: 'bar',
          data: [100, 150, 250, 450, 500],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '提车及时率',
          type: 'line',
          yAxisIndex: 1,
          data: [80, 108, 80, 71, 90],
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: '{c}%'
              },
              lineStyle: {
                color: '#ffc000'
              }
            }
          }
        }
      ]
    };

    let option2 = {
      title: {
        x: 'center',
        text: '前段发运推运图',
        textStyle: {
          color: '#fff',
          fontSize: '30'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
            fontSize: '30'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      color: ['#5086d6', '#f67c2b', '#a5a5a5'],
      legend: {
        bottom: 10,
        left: 'center',
        data: ['入库', '发运', '库存', '发运及时率'],
        textStyle: {
          color: '#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['11-1', '11-2', '11-3', '11-4', '11-5'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量',
          min: 0,
          max: 900,
          interval: 150,
          axisLabel: {
            formatter: '{value} 台',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#464646'
            }
          }
        },
        {
          type: 'value',
          name: '比率',
          min: 0,
          max: 120,
          interval: 20,
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#464646'
            }
          }
        }
      ],
      series: [
        {
          name: '入库',
          type: 'bar',
          data: [500, 550, 400, 700, 600],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '发运',
          type: 'bar',
          data: [400, 650, 400, 500, 600],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '库存',
          type: 'bar',
          data: [100, 150, 250, 450, 500],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '发运及时率',
          type: 'line',
          yAxisIndex: 1,
          data: [80, 108, 80, 71, 90],
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: '{c}%'
              },
              lineStyle: {
                color: '#ffc000'
              }
            }
          }
        }
      ]
    };

    let weatherIcons = {
      'Sunny': './data/asset/img/weather/sunny_128.png',
      'Cloudy': './data/asset/img/weather/cloudy_128.png',
      'Showers': './data/asset/img/weather/showers_128.png'
    };

    let option3 = {
      title: {
        text: '超期原因分析',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '30'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      color: ['#5086d6', '#f67c2b', '#a5a5a5'],
      legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['质损', '缺件', '暂运'],
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          type: 'pie',
          radius: '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: [
            {
              value: 1548,
              name: '质损',
              label: {
                normal: {
                  formatter: [
                    '{title|{b}}{abg|}',
                    '  {weatherHead|原因}{valueHead|件数}{rateHead|占比}',
                    '{hr|}',
                    '  {Sunny|}{value|202}{rate|55.3%}',
                    '  {Cloudy|}{value|142}{rate|38.9%}',
                    '  {Showers|}{value|21}{rate|5.8%}'
                  ].join('\n'),
                  backgroundColor: '#eee',
                  borderColor: '#777',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: '#eee',
                      align: 'center'
                    },
                    abg: {
                      backgroundColor: '#333',
                      width: '100%',
                      align: 'right',
                      height: 25,
                      borderRadius: [4, 4, 0, 0]
                    },
                    Sunny: {
                      height: 30,
                      align: 'left',
                      backgroundColor: {
                        image: weatherIcons.Sunny
                      }
                    },
                    Cloudy: {
                      height: 30,
                      align: 'left',
                      backgroundColor: {
                        image: weatherIcons.Cloudy
                      }
                    },
                    Showers: {
                      height: 30,
                      align: 'left',
                      backgroundColor: {
                        image: weatherIcons.Showers
                      }
                    },
                    weatherHead: {
                      color: '#333',
                      height: 24,
                      align: 'left'
                    },
                    hr: {
                      borderColor: '#777',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'left'
                    },
                    valueHead: {
                      color: '#333',
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'center'
                    },
                    rate: {
                      width: 40,
                      align: 'right',
                      padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                      color: '#333',
                      width: 40,
                      align: 'center',
                      padding: [0, 10, 0, 0]
                    }
                  }
                }
              }
            },
            {value: 510, name: '缺件'},
            {value: 634, name: '暂运'},
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    let option4 = {
      title: {
        text: '发运模式推移图',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '30'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      color: ['#5086d6', '#f67c2b', '#a5a5a5'],
      legend: {
        orient: 'vertical',
        left: 'right',
        data: ['铁运', '陆运', '水运'],
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['11-1', '11-2', '11-3', '11-4', '11-5', '11-6', '11-7'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量',
          min: 0,
          max: 1400,
          interval: 200,
          axisLabel: {
            formatter: '{value} 台',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#464646'
            }
          }
        }
      ],
      series: [
        {
          name: '水运',
          type: 'bar',
          stack: 'transport',
          data: [120, 132, 101, 134, 90, 230, 210],
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '陆运',
          type: 'bar',
          //            barWidth : 5,
          stack: 'transport',
          data: [220, 182, 191, 234, 290, 330, 310],
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '铁运',
          type: 'bar',
          //            barWidth : 5,
          stack: 'transport',
          data: [220, 182, 191, 234, 290, 330, 310],
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        }
      ]
    };

    let option5 = {
      title: {
        text: '超期原因分析',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['质损', '缺件', '暂运']
      },
      series: [
        {
          name: '超期原因',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: 335, name: '质损'},
            {value: 310, name: '缺件'},
            {value: 234, name: '暂运'},
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };


    var cct = 6;
    setInterval(function () {
      let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

      let data0 = option1.series[0].data;
      let data1 = option1.series[1].data;
      let data2 = option1.series[2].data;
      let data3 = option1.series[3].data;

      data0.shift();
      data0.push(Math.round(Math.random() * 900));
      data1.shift();
      data1.push(Math.round(Math.random() * 900));
      data2.shift();
      data2.push(Math.round(Math.random() * 900));
      data3.shift();
      data3.push(parseFloat((Math.random() * 30).toFixed(1)) + parseFloat(70.0));

      let xChar = '11-';
      if (cct == 31) {
        cct = 1;
        xChar += cct;
      } else {
        xChar += cct;
        cct++
      }
      option1.xAxis[0].data.shift();
      option1.xAxis[0].data.push(xChar);

      tb1.setOption(option1);

    }, 2100);

    var ct = 6;
    setInterval(function () {
      let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

      let data0 = option2.series[0].data;
      let data1 = option2.series[1].data;
      let data2 = option2.series[2].data;
      let data3 = option2.series[3].data;

      data0.shift();
      data0.push(Math.round(Math.random() * 900));
      data1.shift();
      data1.push(Math.round(Math.random() * 900));
      data2.shift();
      data2.push(Math.round(Math.random() * 900));
      data3.shift();
      data3.push(parseFloat((Math.random() * 30).toFixed(1)) + parseFloat(70.0));

      let xChar = '11-';
      if (ct == 31) {
        ct = 1;
        xChar += ct;
      } else {
        xChar += ct;
        ct++
      }
      option2.xAxis[0].data.shift();
      option2.xAxis[0].data.push(xChar);

      tb2.setOption(option2);

    }, 2100);


    tb3.setOption(option3);
    tb4.setOption(option4);
  }

  window.omload = function(){
      load();
  };

//      import Vue from 'vue';
//      import resource from 'vue-resource';
//
//      Vue.use(resource);
//      Vue.http.options.emulateJSON = true;

      export default{
        name: 'one',
        data(){
          return {
            data:'ceshi'
          }
        },
        mounted: function(){
            console.log('mounted完成');
            window.load()
        },
        methods: {

        }
      }
</script>

<style scoped>
    canvas{
      width: 100%;
    }
    #main{
      width: 100%;
      height: 100%;
    }
    .rootBox{
      display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
      display: -moz-box;     /* 老版本语法: Firefox (buggy) */
      display: -ms-flexbox;  /* 混合版本语法: IE 10 */
      display: -webkit-flex; /* 新版本语法: Chrome 21+ */
      display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
      display: -webkit-box;
      height:  50%;
      width:   100%;
    }
    .part{
      -webkit-box-flex: 1 ;   /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;       /* OLD - Firefox 19- */
      -webkit-flex: 1;        /* Chrome */
      -ms-flex: 1 ;            /* IE 10 */
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
      border: 1px solid #000;
      margin: 5px;
      overflow: hidden;
      box-sizing: border-box;
      /*background-image: -webkit-radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));*/
      /*background-image: radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));*/
      background-image: -webkit-radial-gradient(#737373,#2b2b2b);
      background-image: radial-gradient(#737373,#2b2b2b);
    }
</style>
